<template>
  <div class="container">
    <div class="mainWrapper">
      <el-row type="flex" justify="space-between" class="main">
        <el-col :span="5" class="tree">
          <Tree @handleClickTreeNode="handleClickTreeNode" @cancleClickTreeNode="cancleClickTreeNode"></Tree>
        </el-col>
        <el-col :span="1" class="line"><el-divider direction="vertical"></el-divider></el-col>
        <el-col :span="18" class="table">
          <Table :propData="tableObj"></Table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Tree from "./modules/Tree"
import Table from "./modules/Table"
export default {
  data() {
    return {
      tableObj: {
        id: '',
        typeCode: ''
      }
    }
  },

  components: {
    Tree,
    Table
  },
  
  mounted() {},

  methods: {
    handleClickTreeNode(obj) {
      const that = this
      let tableObj = {
        id: obj.id,
        tableCode: obj.tableCode,
        tableName: obj.tableName
      }
      that.tableObj = JSON.parse(JSON.stringify(tableObj))
    },
    cancleClickTreeNode() {
      const that = this
      let tableObj = {
        id: '',
        tableCode: '',
        tableName: ''
      }
      that.tableObj = JSON.parse(JSON.stringify(tableObj))
    }
  }
}

</script>
<style lang='scss' scoped>
@import '../../../styles/contain.scss';
.container {
  height: 100%;
}
.main {
  height: 100%;
}
.tree {
  height: 100%;
}
.table {
  height: 100%;
}
.line {
  height: 100%;
  text-align: center;
}
.line /deep/ .el-divider {
  height: 100%;
}
.mainWrapper {
  width: 100%;
  height: 100%;
}
</style>
